<mat-toolbar color="primary"></mat-toolbar>
<mat-toolbar color="primary">
  <div class="calendar-header" fxLayout="row" fxLayoutAlign="start center">
    <span>{{ viewDate | calendarDate:(view + 'ViewTitle'):'zh' }}</span>
    <span fxFlex></span>
    <div class="chevrons">
      <button mat-icon-button mwlCalendarPreviousView [view]="view" [(viewDate)]="viewDate">
        <mat-icon>chevron_left</mat-icon>
      </button>
      <button mat-icon-button mwlCalendarNextView [view]="view" [(viewDate)]="viewDate">
        <mat-icon>chevron_right</mat-icon>
      </button>
    </div>
    <button mat-button (click)="view = 'month'">月</button>
    <button mat-button (click)="view = 'week'">周</button>
    <button mat-button (click)="view = 'day'">日</button>
  </div>
</mat-toolbar>

<div class="calendar">
  <div [ngSwitch]="view">
    <mwl-calendar-month-view *ngSwitchCase="'month'" [viewDate]="viewDate" [events]="events" [refresh]="refresh" [activeDayIsOpen]="activeDayIsOpen"
      (dayClicked)="dayClicked($event.day)" (eventClicked)="handleEvent('Clicked', $event.event)" (eventTimesChanged)="eventTimesChanged($event)">
    </mwl-calendar-month-view>
    <mwl-calendar-week-view *ngSwitchCase="'week'" [viewDate]="viewDate" [events]="events" [refresh]="refresh" (eventClicked)="handleEvent('Clicked', $event.event)"
      (eventTimesChanged)="eventTimesChanged($event)">
    </mwl-calendar-week-view>
    <mwl-calendar-day-view *ngSwitchCase="'day'" [viewDate]="viewDate" [events]="events" [refresh]="refresh" (eventClicked)="handleEvent('Clicked', $event.event)"
      (eventTimesChanged)="eventTimesChanged($event)">
    </mwl-calendar-day-view>
  </div>
</div>
